<template>
  <div class="login">
    <el-form :model="form" :rules="rules" ref="from" label-width="70px" class="login-form">
      <h3>管理</h3>
      <el-form-item label="用户名:" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="medium"
          style="width: 100%;"
          @click.native.prevent="handleLogin"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import jwt_decode from "jwt-decode";
export default {
  name: "login",
  components: {},
  data() {
    return {
      form: {
        email: "",
        password: ""
      },
      rules: {
        email: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleLogin() {
      this.$refs.from.validate(valid => {
        if (valid) {
          this.$axios.post("/api/users/login", this.form).then(res => {
            // console.log(res)
            // token
            const { token } = res.data;
            // 存储到ls
            localStorage.setItem("token", token);

            // 解析token
            const decoded = jwt_decode(token);
            // console.log(decoded)
            // token 存储在vuex
            // this.$slots.dispatch("setAuthenticated",)

            this.$router.push("/home");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // isEmpty(value) {
    //     return (
    //         value === undefined ||
    //         value === null ||
    //         (typeof value === "object" && Object.keys(value).length === 0) ||
    //         (typeof value === "string" && value.trim().length === 0) ||
    //     )
    // }
  }
};
</script>
<style>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551939055&di=8a527df1eca5fabe21f6e91919d6f4b7&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.97uimg.com%2Fyc_pic%2F00%2F12%2F61%2F81%2F8aa75c23517ed47dbc5b11fc957c9467.jpg);
  background-size: cover;
  height: 100%;
}
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 365px;
  padding: 25px 25px 5px 25px;
  min-height: 200px;
  text-align: center;
}
.el-input {
  height: 38px;
}
input {
  height: 38px;
}
</style>



